<template>
  <div class="padding flex justify-center">
    <div class="load-box" @click="handleChangeStatus">
      <i class="el-icon-loading margin-right-xs" v-if="status == 1"></i
      >{{ msg[status] }}
    </div>
  </div>
</template>

<script>
export default {
  name: "LoadMore",
  props: {
    // 状态
    status: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      msg: ["点击加载更多", "正在努力加载", "真的没有拉噢"],
    };
  },
  methods: {
    handleChangeStatus() {
      this.$emit("changeStatus");
    },
  },
};
</script>

<style lang='scss' scoped>
.load-box {
  cursor: pointer;
  padding: 13px 35px;
  box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
  border-radius: 50px;
  text-shadow: 2px 2px 1px #fff;
  background: #f3efe6;
}
</style>
